<template>
  <div class='articles-preview'>
    <el-dialog
      title="预览文章"
      :visible.sync="previewDialogVisible"
      width="50%"
    >
      <!-- 内容区域 -->
      <!-- 标题 -->
      <h2>{{ article.title }}</h2>
      <!-- 时间 录入人 阅读数 -->
      <p>
        <span>{{ article.createTime | dataFormat }}</span>&nbsp;
        <span>{{ article.username }}</span>&nbsp;
        <span slot="icon" class="el-icon-view">{{ article.visits }}</span>
      </p>
      <!-- 文章内容 -->
      <div class="content" v-html="article.articleBody">
      </div>
    </el-dialog>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: '',
  data() {
    return {
      previewDialogVisible: false,
      article: {}
    }
  },
  // 日期
  filters: {
    dataFormat: function (date) {
      return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  methods: {}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .content{
  padding: 10px 5px;
  background-color: #f5f5f5;
  border-top: 1px dashed #ccc;
  img{
  width: 100%;
 }
}
</style>
